<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/goods/buy_car.css" />
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
</head>

<style>
    .ptsp_top_stats {
        height: 20px;
        width: 100%;
        background-color: #ffffff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
    }
    .mui-bar-nav{
    	top:0;
    }
    .mui-content {
padding-bottom: 100px;
padding-top: 44px !important;
}
</style>

<body>

    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon  mui-pull-left arr_left"></a>
        <h1 class="mui-title">购物车</h1>
        <a class="mui-pull-right" onclick = "buy_car.is_show_del(this)">管理</a>
    </header>
    <div class="mui-content">
        <div class="shop_list">
            <div class="shop_item" v-for="i in car_list">
                <div class="title" :data-shop-id="i.shop_id">
                    <i :class="i.is_checked|is_chekced" @click="select_shop(i.shop_id)"></i>
                    <span @click="to_page('shop_detail.html')">
                        <span class="fl"  >{{i.shop_name}}<i class="mui-icon mui-icon-arrowright" style="color: #8a8a8a;font-size:0.7973rem ;"></i></span>
                        <!--<b class="fl"></b>-->
                    </span>
                </div>
                <div class="goods_list">

                    <div class="goods_item" v-for="t in i.goods_list">
                        <i :class="t.is_checked|is_chekced" @click="select_goods(i.shop_id,t.id)"></i>
                        <div class="img fl">
                            <img :src="t.pic" alt="">
                        </div>
                        <div class="info fl">
                            <div class="goods_title" v-html="t.name"></div>
                            <div class="price">￥{{t.price}}</div>
                            <div class="cout_box">
                                <span @click="change_num(i.shop_id,t.id,'cut')">-</span>
                                <span v-html="t.num">0</span>
                                <span @click="change_num(i.shop_id,t.id,'add')">+</span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="select_all" v-if="show_del">
            <a @click="select_all">
                <i :class="all_check|is_chekced"></i>
                <span>全选</span>
            </a>
            <button @click="to_del">删除</button>
            <button @click="to_collect">移入收藏夹</button>
        </div>
        <div class="select_all" v-if="!show_del">
            <a @click="select_all">
                <i :class="all_check|is_chekced"></i>
                <span>全选</span>
            </a>
            <button class="jiesuan" @click="go_confirm_order('1')">结算</button>
            <button class="all_price">合计:
                <span style="color: #ff0000">￥{{all_money}}</span>
            </button>
        </div>
    </div>

   <!--底部菜单-->
		<style type="text/css">
			.mui-bar-tab .mui-tab-item.mui-active{
				color: #888888;
			}
			.bottom_nav_active span{
				color: #1c83fc;
			}
		</style>
		<nav class="mui-bar mui-bar-tab" style="border-top: 1px solid #d6d7dc;top: auto;">
			<a class="mui-tab-item " id='home_tab' href="shop_home.html">
				<span class="mui-icon ">
                <img src="../images/nav_12.png" width="19px;" alt="">
            	</span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item " id='class_tab' href="select_class.html">
				<span class="mui-icon">
                <img src="../images/nav_03.png" width="19px;" alt="">
            </span>
				<span class="mui-tab-label">分类</span> 
			</a>
			<a class="mui-tab-item " id='shop_tab'  href="youhui.html">
				<span class="mui-icon">
                <img src="../images/nav_05.png" width="19px;" alt="">
            </span>
				<span class="mui-tab-label">名品商家</span>
			</a>
			<a class="mui-tab-item bottom_nav_active" id='car_tab'  href="buy_car.html">
				<span class="mui-icon">
                <img src="../images/nv_checked_07.png" width="19px;" alt="">
            </span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" id='my_tab'  href="myshop.html">
				<span class="mui-icon">
                <img src="../images/nav_09.png" width="19px;" alt="">
            </span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		 
			<!--底部菜单 end-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/tools/util.js"></script>
    <script src="../js/host.config.js"></script>
    <script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
    <script>
        Vue.filter("is_chekced", function (is_chekck) {

            if (is_chekck) {
                return "icon icon_checked fl"
            } else {
                return "icon fl"
            }
        })
        var buy_car = new Vue({
            el: '.mui-content',
            data: {
                car_list: '',
                show_del: false,//是否显示删除面板
                i: 0,
                n: 0,
                all_check: false
            },
            methods: {
                get_data: function (url, cb) {
                    var url_hd = '';
                    url_hd = "http://111.231.207.210:3001"
                    mui.ajax(url_hd + url, {
                        dataType: 'json',//服务器返回json格式数据
                        type: 'get',//HTTP请求类型
                        timeout: 10000,//超时时间设置为10秒；
                         
                        success: function (res) {
                            //服务器返回响应，根据响应结果，分析是否登录成功；
                            console.log(res);
                            if (res.code == 200) {
                                cb(res)
                            }
                        },
                        error: function (xhr, type, errorThrown) {
                            //异常处理；
                            console.log(type);
                        }
                    });
                },
                change_num: function (shop_id, goods_id, func) {
                    // 点击加号 将对应商品的 店铺ID 和商品ID 传入方法
                    var d = this.car_list;
                    for (var i = 0; i < d.length; i++) {
                        if (shop_id == d[i].shop_id) {
                            for (var j = 0; j < d[i].goods_list.length; j++) {
                                if (goods_id == d[i].goods_list[j].id) {
                                    console.log(d[i].goods_list[j].num);

                                    if (func == 'add') {
                                        d[i].goods_list[j].num = parseInt(d[i].goods_list[j].num) + 1;

                                    } else {
                                        if (parseInt(d[i].goods_list[j].num) >= 2) {
                                            d[i].goods_list[j].num = parseInt(d[i].goods_list[j].num) - 1;

                                        }
                                    }
                                    break;
                                }
                            }
                            break;
                        }
                    }
                },
                select_goods: function (shop_id, goods_id) {
                    var d = this.car_list;
                    var that = this;
                    console.log("(" + shop_id + "," + goods_id + ")");
                    for (var i = 0; i < d.length; i++) {
                        var shop_goods_num = d[i].goods_list.length;
                        var now_num = 0;
                        if (shop_id == d[i].shop_id) {
                            // 找到对应的店铺
                            for (var j = 0; j < d[i].goods_list.length; j++) {
                                if (goods_id == d[i].goods_list[j].id) {
                                    // 找到对应的商品
                                    console.log(d[i].goods_list[j].name);

                                    if (d[i].goods_list[j].is_checked) {

                                        Vue.set(d[i].goods_list[j], 'is_checked', false)
                                        this.i--;
                                    } else {
                                        Vue.set(d[i].goods_list[j], 'is_checked', true)
                                        this.i++
                                    }
                                    //d[i].goods_list[j].is_checked = true;
                                    console.log(d[i].goods_list[j])
                                }
                                if (d[i].goods_list[j].is_checked) {
                                    //如果当前被选中
                                    now_num++;
                                }
                            }
                            console.log("当前店铺" + now_num + "/" + shop_goods_num)

                            if (shop_goods_num == now_num) {
                                d[i].is_checked = true;
                            } else {
                                d[i].is_checked = false;
                            }
                        }
                    };
                    this.is_all_checked()
                

                },
                select_all: function () {

                    if (this.all_check) {
                        //取消全选
                        var d = this.car_list;
                        for (var i = 0; i < d.length; i++) {
                            //获取当前店铺 d[i]
                            Vue.set(d[i], 'is_checked', false)
                            //d[i].is_checked = false;
                            for (var j = 0; j < d[i].goods_list.length; j++) {
                                //获取当前店铺的每个商品 d[i].goods_list[j]
                                Vue.set(d[i].goods_list[j], 'is_checked', false)
                                //d[i].goods_list[j].is_checked = false;
                            }
                        }
                        this.all_check = false;
                    } else {
                        //全选
                        var d = this.car_list;
                        for (var i = 0; i < d.length; i++) {
                            //获取当前店铺 d[i]
                            Vue.set(d[i], 'is_checked', true)
                            //d[i].is_checked = true;
                            for (var j = 0; j < d[i].goods_list.length; j++) {
                                //获取当前店铺的每个商品 d[i].goods_list[j]
                                Vue.set(d[i].goods_list[j], 'is_checked', true)

                                // d[i].goods_list[j].is_checked = true;
                            }
                        }
                        this.all_check = true;

                    }
                },
                select_shop: function (shop_id) {
                     
                    var d = this.car_list;
                    for (var i = 0; i < d.length; i++) {
                        if (shop_id == d[i].shop_id) {
                            console.log('this shop -->', d[i])
                            if (d[i].is_checked) {
                                //取消当前店铺的所有商品选中状态
                                for (var j = 0; j < d[i].goods_list.length; j++) {
                                    if(d[i].goods_list[j].is_checked){
                                        Vue.set(d[i].goods_list[j], 'is_checked', false);
                                        this.i--;
                                    }
                                   
                                }
                                Vue.set(d[i], 'is_checked', false);

                            } else {
                                //选中店铺所有商品
                                this.i +=  d[i].goods_list.length;
                                for (var j = 0; j < d[i].goods_list.length; j++) {
                                    Vue.set(d[i].goods_list[j], 'is_checked', true)
                                }
                                Vue.set(d[i], 'is_checked', true)

                            }
                            break;
                        }

                    }
                    this.is_all_checked()
                },
                to_page: function (page_name) {
                    mui.toast("跳转至" + page_name)
                },
                is_all_checked:function(){
                    console.log('总数：' + this.i + "/" + this.n)
                    if (this.i == this.n) {
                        this.all_check = true;
                    } else {
                        this.all_check = false;

                    }
                }
                ,
                is_show_del:function(el){
                    if(this.show_del){
                        // 关闭
                        el.innerHTML="管理"

                        this.show_del = false;
                    }else{
                        // 打开
                        el.innerHTML="完成"

                        this.show_del = true;

                    }
                     
                },
                to_del:function(){
                    mui.toast("删除选中项操作")
                },
                to_collect:function(){
                    mui.toast("收藏选中项操作")

                }
                ,
                go_confirm_order:function(){
                	mui.openWindow('confirm_order.html','confirm_order.html')
                }
            },
            computed: {
                all_money: function () {
                    var p = 0;
                    var d = this.car_list;
                    for (var i = 0; i < d.length; i++) {
                        var shop_p = 0;
                        for (var j = 0; j < d[i].goods_list.length; j++) {
                            var g = d[i].goods_list[j];
                            if (g.is_checked) {
                                shop_p += parseFloat(g.price) * 100 * parseInt(g.num);

                            }

                        }
                        console.log(shop_p)
                        p += shop_p;
                    }
                    return (p / 100).toFixed(2);
                }
            },
            created:function(){
            	 var user = host_config.localStorage.user;
				        if (user) {
				            this.user = JSON.parse(user);
				        }
				        
            },
            mounted: function () {
                var that = this;
                this.get_data("/sim_data/buy_car_list.json", function (res) {
                    that.car_list = res.data;
                    var d = that.car_list;
                    for (var i = 0; i < d.length; i++) {
                        console.log(d[i].goods_list.length)
                        that.n += d[i].goods_list.length;
                        for (var j = 0; j < d[i].goods_list.length; j++) {
                            var g = d[i].goods_list[j]

                            if (g.is_checked) {

                                that.i++;
                            }
                        }
                    }
                    that.is_all_checked()
                });
                //初始化商品总数及当前选中数

            }
        })
        mui('.mui-bar-tab').on('tap','.mui-tab-item', function(){
				console.log(this.href)
				mui.openWindow(this.href,this.href)
			})
        
        
        
        
        
        
        
//获取购物车数据
function get_buy_car_list(uid){
	$.ajax({
		type:"post",
		url:"https://zhapp.4hl.cn/app/Cart/cartLists",
		data:{
			uid:uid
		},
		success:function(){
			
		},
		error:function(){
			
		}
 
	});
	
	$.post(url + 'app/Cart/cartLists', { uid: this.user.uid }, function (response) {
            var responseData = JSON.parse(response);
            if (responseData.code == '1') {
                if (responseData.data.length > 0) {
                    var goods = responseData.data;
                    if (goods.length > 0) {
                        goods.forEach(function (itemGroup, index) {
                            itemGroup.goods.forEach(function (item, index) {
                                item.checked = false;
                            });
                        });
                    }
                    _this.goodsGroup = goods;
                } else {
                    _this.goodsGroup = null;
                }
            }
        });
	
}
    </script>
</body>

</html>